<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收发柜可视化大屏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 1920px;
            height: 100%;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        #container {
            background: radial-gradient(ellipse at center, #0b2140 0%, #030a1c 100%);
            width: 100%;
            height: 100%;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 100px rgba(2, 10, 35, 0.9);
        }
        
        /* 标题和顶部 */
        .header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
			background:url(bg2.png) no-repeat;
			background-size:100% 100%;
        }
        
        .header-title {
            font-size: 36px;
            font-weight: 900;
            letter-spacing: 4px;
            /*text-shadow: 0 0 15px rgba(0, 195, 255, 0.8);*/
            background: linear-gradient(90deg, #7de6fd, #46a1fd);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
        }
        
        .header-time {
            position: absolute;
            left: 20px;
            top: 40px;
            font-size: 15px;
            font-weight: 300;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 1);
        }
        
        /* 左侧设备面板 */
        .panel-left {
            position: absolute;
            top: 120px;
            left: 30px;
            width: 380px;
            height: 400px;
            padding: 25px;
            background: rgba(14, 29, 61, 0.4);
            border: 1px solid rgba(0, 188, 255, 0.2);
            box-shadow: 0 0 15px rgba(1, 37, 72, 0.8);
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }
        
        .panel-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #7de6fd;
            border-left: 3px solid #00c4ff;
            padding-left: 15px;
            letter-spacing: 1px;
        }
        
        .status-card {
            background: rgba(3, 26, 71, 0.5);
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid rgba(0, 110, 255, 0.2);
            box-shadow: inset 0 0 12px rgba(33, 85, 125, 0.4);
        }
        
        .status-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
        }
        
        .status-name {
            font-size: 16px;
            font-weight: 500;
            color: #b4deff;
        }
        
        .status-value {
            font-size: 24px;
            font-weight: 800;
        }
        
        .status-normal {
            color: #00d9a2;
        }
        
        .status-warning {
            color: #ffaa45;
        }
        
        .status-critical {
            color: #ff4d6f;
        }
        
        .progress-bar {
            width: 100%;
            height: 10px;
            background: rgba(20, 70, 120, 0.4);
            border-radius: 5px;
            margin-top: 2px;
            overflow: hidden;
        }
        
        .progress-normal {
            background: linear-gradient(90deg, #00d994, #02ff8b);
            height: 100%;
        }
        
        .progress-warning {
            background: linear-gradient(90deg, #ffb400, #ffdc78);
            height: 100%;
        }
        
        .progress-critical {
            background: linear-gradient(90deg, #ff0040, #ff4d6f);
            height: 100%;
        }
        
		.progress-used {
			background: linear-gradient(90deg, #2a6efb, #00e0ff);
            height: 100%;
		}

        /* 右侧监控画面 */
        .panel-right {
            position: absolute;
            top: 120px;
            right: 30px;
            width: 380px;
            height: 400px;
            background: rgba(14, 29, 61, 0.4);
            border: 1px solid rgba(0, 188, 255, 0.2);
            box-shadow: 0 0 15px rgba(1, 37, 72, 0.8);
            border-radius: 10px;
            backdrop-filter: blur(10px);
            padding: 25px;
        }
        
        .monitor-frame {
            width: 100%;
            height: 320px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            border: 2px solid rgba(98, 160, 221, 0.3);
        }
        
        .monitor-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 20, 60, 0.8);
            padding: 8px;
            font-size: 15px;
            text-align: center;
            color: #9dd3ff;
        }
        
        /* 3D模型区域 */
        .model-container {
            position: absolute;
            top: 150px;
            left: 460px;
            width: 1040px;
            height: 580px;
            perspective: 1200px;
        }
        
        .model-box {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            /* 移除旋转动画 */
        }
        
        .model-floor {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) rotateX(90deg);
            width: 900px;
            height: 600px;
            background: linear-gradient(rgba(35, 114, 215, 0.15), rgba(0, 30, 60, 0.1));
            border-radius: 5px;
        }
        
        .model-unit {
            position: absolute;
            background: rgba(20, 80, 180, 0.4);
            border: 2px solid rgba(0, 188, 255, 0.4);
            box-shadow: 0 0 20px rgba(0, 70, 210, 0.4);
        }
        
        .led-normal {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #00ffb3;
            animation: pulseNormal 1.5s infinite;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
        .led-warning {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ffb400;
            animation: pulseWarning 1s infinite;
            position: absolute;
            top: 10px;
            right: 10px;
        }
        
        /* 底部数据面板 */
        .bottom-panel {
            position: absolute;
            top:540px;
            right: 30px;
            height: 400px;
            display: flex;
        }
		.bottom-panel1 {
            position: absolute;
            top:540px;
            left: 30px;
            height: 400px;
            display: flex;
        }
        
        .env-stats {
            width: 285px;
            height: 100%;
            background: rgba(14, 29, 61, 0.4);
            border: 1px solid rgba(0, 188, 255, 0.2);
            box-shadow: 0 0 15px rgba(1, 37, 72, 0.8);
            border-radius: 10px;
            backdrop-filter: blur(10px);
            padding: 20px;
        }
        
        .dashboard {
            flex: 1;
            height: 100%;
            margin: 0 20px;
            background: rgba(14, 29, 61, 0.4);
            border: 1px solid rgba(0, 188, 255, 0.2);
            box-shadow: 0 0 15px rgba(1, 37, 72, 0.8);
            border-radius: 10px;
            backdrop-filter: blur(10px);
            padding: 10px;
        }
        
        .alert-panel {
            width: 380px;
            height: 100%;
            background: rgba(14, 29, 61, 0.7);
            border: 1px solid rgba(0, 188, 255, 0.2);
            box-shadow: 0 0 15px rgba(1, 37, 72, 0.8);
            /*border-radius: 10px;
            backdrop-filter: blur(10px);*/
            padding: 20px 15px;
            overflow: hidden;
        }
        
        .alert-title {
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0, 140, 255, 0.3);
            margin-bottom: 15px;
        }
        
        .alert-title-icon {
            color: #ff4d6f;
            margin-right: 10px;
        }
        
        .alert-title-text {
            font-size: 20px;
            font-weight: 700;
            color: #ff728c;
        }
        
        .alert-list {
            /*height: 200px;*/
            overflow: hidden;
        }
        
        .alert-item {
            /*background: rgba(161, 0, 18, 0.25);*/
            border-bottom: 1px solid rgba(0, 188, 255, 0.2);//#ff4d6f;
            padding: 12px 15px;
            margin-bottom: 8px;
            border-radius: 0 6px 6px 0;
            animation: slideIn 0.4s ease-out forwards;
            font-size: 15px;
            display: flex;
            align-items: center;
        }

		.alert-item2 {
            background: rgba(161, 0, 18, 0.25);
            border-left: 3px solid #ff4d6f;
            padding: 12px 15px;
            margin-bottom: 8px;
            border-radius: 0 6px 6px 0;
            animation: slideIn 0.4s ease-out forwards;
            font-size: 15px;
            display: flex;
            align-items: center;
        }
        
        .alert-item-new {
            animation: blinkBorder 1.5s infinite;
        }
        
        .alert-icon {
            color: #ff4d6f;
            margin-right: 10px;
            font-size: 16px;
        }
        
        .env-card {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid rgba(0, 140, 255, 0.2);
        }
        
        .env-icon {
            font-size: 28px;
            margin-right: 15px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .icon-temperature {
            background: rgba(29, 123, 169, 0.3);
            color: #3ed4ff;
        }
        
        .icon-humidity {
            background: rgba(29, 62, 169, 0.3);
            color: #3e80ff;
        }
        
        .icon-power {
            background: rgba(169, 139, 29, 0.3);
            color: #ffda3e;
        }
        
        .env-info {
            flex: 1;
        }
        
        .env-name {
            font-size: 16px;
            color: #89c5ff;
            margin-bottom: 5px;
        }
        
        .env-value {
            font-size: 22px;
            font-weight: 800;
            color: #c2e8ff;
        }
        
        .chart-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .chart-item {
            width: 32%;
            height: 230px;
            background: rgba(3, 26, 71, 0.5);
            border-radius: 10px;
            position: relative;
        }
        
        .chart-label {
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            color: #89c5ff;
        }
        
        /* 发光效果 */
        .glow-effect {
            box-shadow: 0 0 15px rgba(0, 135, 255, 0.5);
        }
        
        /* 装饰元素 */
        .decoration-corner {
            position: absolute;
            width: 15px;
            height: 15px;
            z-index: 2;
        }
        
        .decoration-corner::before,
        .decoration-corner::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-color: #0180ff;
        }
        
        .corner-top-left {
            top: -1px;
            left: -1px;
        }
        
        .corner-top-left::before {
            top: 0;
            left: 0;
            border-top: 2px solid #00f6ec;
            border-left: 2px solid #00f6ec;
        }
        
        .corner-top-right {
            top: -1px;
            right: -1px;
        }
        
        .corner-top-right::before {
            top: 0;
            right: 0;
            border-top: 2px solid #00f6ec;
            border-right: 2px solid #00f6ec;
        }
        
        .corner-bottom-left {
            bottom: -1px;
            left: -1px;
        }
        
        .corner-bottom-left::before {
            bottom: 0;
            left: 0;
            border-bottom: 2px solid #00f6ec;
            border-left: 2px solid #00f6ec;
        }
        
        .corner-bottom-right {
            bottom: -1px;
            right: -1px;
        }
        
        .corner-bottom-right::before {
            bottom: 0;
            right: 0;
            border-bottom: 2px solid #00f6ec;
            border-right: 2px solid #00f6ec;
        }
        
        /* 动画效果 */
        /* 状态样式 */
        .cabinet-status {
            position: absolute;
            bottom: -20px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
        }
        
        .status-occupied {
            color: #40a9ff;
        }

		.status-used {
			color:#2a6efb;
		}
        
        .status-overdue {
            color: #ff4d6f;
        }
        
        .status-warning {
            color: #ffaa45;
        }
        
        .status-error {
            color: #ff0040;
        }
        
        .status-empty {
            color: #00d9a2;
        }
        
        /* 状态弹出框 */
        .status-tooltip {
            position: absolute;
            background: rgba(0, 30, 60, 0.95);
            border: 1px solid #00a8ff;
            padding: 10px;
            border-radius: 5px;
            width: 180px;
            color: #fff;
            font-size: 14px;
            box-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
            z-index: 100;
        }
        
        .model-unit:hover .status-tooltip {
            opacity: 1;
        }
        
        .cabinet-number {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 30, 60, 0.7);
            color: #00f6ec;
            font-size: 16px;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0, 246, 236, 0.5);
        }
        
        @keyframes pulseNormal {
            0% { box-shadow: 0 0 0 0 rgba(0, 255, 179, 0.7); }
            70% { box-shadow: 0 0 0 8px rgba(0, 255, 179, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 255, 179, 0); }
        }
        
        @keyframes pulseWarning {
            0% { box-shadow: 0 0 0 0 rgba(255, 180, 0, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(255, 180, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 180, 0, 0); }
        }
        
        @keyframes blinkBorder {
            0% { box-shadow: 0 0 0 0 rgba(255, 77, 111, 0.7); }
            70% { box-shadow: 0 0 0 5px rgba(255, 77, 111, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 77, 111, 0); }
        }
        
        @keyframes slideIn {
            from { 
                opacity: 0; 
                transform: translateX(20px);
            }
            to { 
                opacity: 1; 
                transform: translateX(0);
            }
        }

		.floating-label {
           background: rgba(10, 15, 30, 0.8);
            color: #e0e7ff;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 16px;
            position: absolute;
			top:38px;
			right:-7px;
			width:110px;
			height:60px;
            z-index: 10;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s ease;
            border: 1px solid rgba(42, 110, 251, 0.5);
        }
        
        .model-unit:hover .floating-label {
            opacity: 1;
        }
		.cen-info {
			text-align:center;
			padding-top:30px;
		}
		.status-indicator {
			display: flex;
			align-items: center;
			padding: 5px 15px;
			border-radius: 20px;
			background: rgba(10, 116, 218, 0.3);
			font-size: 16px;
			top:35px;
			right:20px;
			position:absolute;
		}
		.status-indicator span {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #00FF7F;
			margin-right: 8px;
			animation: pulseNormal 1.5s infinite;
		}
		.cqtime {
			color:#00c4ff;
			font-weight:600;
		}
		.user {
			position:absolute;
			bottom:20px;
			left:calc(50% - 125px);
			font-size:25px;
			color:#ccc;
			/*text-shadow:0 0 5px white,0 0 10px #00FFFF,0 0 15px #7FFF00,0 0 20px white;*/
		}
		.logo1 {
			/*box-shadow:0 0 5px white,0 0 10px #00FFFF,0 0 15px #7FFF00,0 0 20px white;
			filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));*/
		}
		
    </style>
</head>
<body>
    <div id="container">
        <!-- 顶部标题和日期 -->
        <div class="header">
			<div class="header-time" id="realTime"></div>
            <div class="header-title">智能收发柜可视化</div>
			<div class="status-indicator">
                <span></span>
                系统运行正常
            </div>
        </div>
        
        <!-- 左侧设备状态 -->
        <div class="panel-left">
            <div class="decoration-corner corner-top-left"></div>
            <div class="decoration-corner corner-top-right"></div>
            <div class="decoration-corner corner-bottom-left"></div>
            <div class="decoration-corner corner-bottom-right"></div>
            
            <div class="panel-title">智能柜概览</div>
            
            <div class="status-card glow-effect">
                <div class="status-header">
                    <div class="status-name">空闲</div>
                    <div class="status-value status-normal">20</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-normal" style="width: 80%"></div>
                </div>
            </div>

			<div class="status-card">
                <div class="status-header">
                    <div class="status-name">占用</div>
                    <div class="status-value status-used">13</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-used" style="width: 50%"></div>
                </div>
            </div>
            
			<div class="status-card">
                <div class="status-header">
                    <div class="status-name">预警</div>
                    <div class="status-value status-warning">7</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-warning" style="width: 15%"></div>
                </div>
            </div>

            <div class="status-card">
                <div class="status-header">
                    <div class="status-name">异常</div>
                    <div class="status-value status-critical">3</div>
                </div>
                <div class="progress-bar">
                    <div class="progress-critical" style="width: 46%"></div>
                </div>
            </div>
            
        </div>
        
        <!-- 右侧监控面板 -->
        <div class="panel-right">
            <div class="decoration-corner corner-top-left"></div>
            <div class="decoration-corner corner-top-right"></div>
            <div class="decoration-corner corner-bottom-left"></div>
            <div class="decoration-corner corner-bottom-right"></div>
            
            <div class="panel-title">存取次数</div>
            
            <div class="monitor-frame">
                <img id="monitorImage" src="https://modao.cc/ai/uploads/ai_pics/21/213748/aigp_1757040609.jpeg" alt="Real-time camera view of storage cabinet" style="width:100%;height:100%;object-fit:cover;">
                <div class="monitor-label">柱状图</div>
            </div>
        </div>
        
        <!-- 3D模型区域 -->
        <div class="model-container">
            <div class="model-box">
                <!-- 模拟3D布局 -->
                <!-- <div class="model-floor"></div> -->
                
                <!-- 7*4布局的28个格口 -->
                <div class="model-unit" style="width:120px; height:160px; top:20px; left:50px;font-size:22px;text-align:center;padding-top:62px;">01<div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:20px; left:180px;font-size:22px;text-align:center;padding-top:62px;">02<div class="led-normal"><div class="floating-label">02 / 占用 / 2.1小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:20px; left:310px;font-size:22px;text-align:center;padding-top:62px;">03<div class="led-normal "><div class="floating-label">03 / 空闲</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:20px; left:440px;font-size:22px;text-align:center;padding-top:62px;">04<div class="led-warning"><div class="floating-label">04 / 预警 / 超时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:20px; left:570px;font-size:22px;text-align:center;padding-top:62px;">05<div class="led-normal"><div class="floating-label">05 / 空闲</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:20px; left:700px;font-size:22px;text-align:center;padding-top:62px;">06<div class="led-normal"><div class="floating-label">01 / 空闲</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:20px; left:830px;font-size:22px;text-align:center;padding-top:62px;">07<div class="led-normal"><div class="floating-label">01 / 空闲</div></div></div>
                
                <div class="model-unit" style="width:120px; height:160px; top:190px; left:50px;"><div class="led-normal"><div class="floating-label">08 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:190px; left:180px;"><div class="led-warning"><div class="floating-label">09 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:190px; left:310px;"><div class="led-normal"><div class="floating-label">10 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; top:90px; left:440px;position:absolute;margin-top:100px;height:330px;padding-top:60px;background-color:#2955a1;">
					<div class=""><img alt="" class="logo1" src="logo1.png" /></div>
				</div>
                <div class="model-unit" style="width:120px; height:160px; top:190px; left:570px;"><div class="led-normal"><div class="floating-label">11 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:190px; left:700px;"><div class="led-warning"><div class="floating-label">12 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:190px; left:830px;"><div class="led-normal"><div class="floating-label">13 / 占用 / 3.2小时</div></div></div>
                
                <div class="model-unit" style="width:120px; height:160px; top:360px; left:50px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:360px; left:180px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:360px; left:310px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <!-- <div class="model-unit" style="width:120px; height:160px; top:320px; left:440px;">
					<div class="cen-info">规格：100*100<br>材质：0.8镀锌板</div>
				</div> -->
                <div class="model-unit" style="width:120px; height:160px; top:360px; left:570px;"><div class="led-warning"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:360px; left:700px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:360px; left:830px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                
                <div class="model-unit" style="width:120px; height:160px; top:530px; left:50px;"><div class="led-warning"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:530px; left:180px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:530px; left:310px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:530px; left:440px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:530px; left:570px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:530px; left:700px;"><div class="led-normal"><div class="floating-label">01 / 占用 / 3.2小时</div></div></div>
                <div class="model-unit" style="width:120px; height:160px; top:530px; left:830px;font-size:22px;text-align:center;padding-top:62px;">26<div class="led-warning"><div class="floating-label">26 / 占用 / 3.2小时</div></div></div>
            </div>
        </div>
        <div class="bottom-panel1">
			<div class="alert-panel">
                <div class="decoration-corner corner-top-left"></div>
                <div class="decoration-corner corner-top-right"></div>
                <div class="decoration-corner corner-bottom-left"></div>
                <div class="decoration-corner corner-bottom-right"></div>
                
                <div class="panel-title">存取记录</div>
                
                <div class="alert-list">
                    <div class="alert-item ">
                        <!-- <span class="alert-icon iconify" data-icon="mdi:alert" id="1"></span> -->
                        <div class="alert-text"><span class="cqtime">2025-09-05 16:55:43</span>&nbsp;#05格口&nbsp;&nbsp;|&nbsp;&nbsp;张三&nbsp;&nbsp;|&nbsp;存</div>
                    </div>
                    <div class="alert-item ">
                        <div class="alert-text"><span class="cqtime">2025-09-05 16:55:43</span>&nbsp;#05格口&nbsp;&nbsp;|&nbsp;&nbsp;李四&nbsp;&nbsp;|&nbsp;取</div>
                    </div>
                    <div class="alert-item ">
                       <div class="alert-text"><span class="cqtime">2025-09-05 16:55:43</span>&nbsp;#07格口&nbsp;&nbsp;|&nbsp;&nbsp;张三&nbsp;&nbsp;|&nbsp;存</div>
                    </div>
                    <div class="alert-item">
                        <div class="alert-text"><span class="cqtime">2025-09-05 16:55:43</span>&nbsp;#05格口&nbsp;&nbsp;|&nbsp;&nbsp;王二麻&nbsp;&nbsp;|&nbsp;存</div>
                    </div>
                    <div class="alert-item">
                       <div class="alert-text"><span class="cqtime">2025-09-05 16:55:43</span>&nbsp;#15格口&nbsp;&nbsp;|&nbsp;&nbsp;张三&nbsp;&nbsp;|&nbsp;&nbsp;存</div>
                    </div>
                    <div class="alert-item">
                        <div class="alert-text"><span class="cqtime">2025-09-05 16:55:43</span>&nbsp;#26格口&nbsp;&nbsp;|&nbsp;&nbsp;张三&nbsp;&nbsp;|&nbsp;&nbsp;存</div>
                    </div>
                </div>
            </div>
		</div>
        <!-- 底部面板区域2 -->
        <div class="bottom-panel">
            <!-- 环境参数 -->
			<!--
            <div class="env-stats">
                <div class="decoration-corner corner-top-left"></div>
                <div class="decoration-corner corner-top-right"></div>
                <div class="decoration-corner corner-bottom-left"></div>
                <div class="decoration-corner corner-bottom-right"></div>
                <div class="panel-title">环境参数监控</div>
                
                <div class="env-card">
                    <div class="env-icon icon-temperature">
                        <span class="iconify" data-icon="mdi:thermometer"></span>
                    </div>
                    <div class="env-info">
                        <div class="env-name">环境温度</div>
                        <div class="env-value">24.6°C</div>
                    </div>
                </div>
                
                <div class="env-card">
                    <div class="env-icon icon-humidity">
                        <span class="iconify" data-icon="mdi:water-percent"></span>
                    </div>
                    <div class="env-info">
                        <div class="env-name">环境湿度</div>
                        <div class="env-value">45.2%</div>
                    </div>
                </div>
                
                <div class="env-card">
                    <div class="env-icon icon-power">
                        <span class="iconify" data-icon="mdi:flash"></span>
                    </div>
                    <div class="env-info">
                        <div class="env-name">电力状态</div>
                        <div class="env-value status-normal">正常</div>
                    </div>
                </div>
            </div>
            -->
            <!-- 数据仪表盘 -->
			<!--
            <div class="dashboard">
                <div class="decoration-corner corner-top-left"></div>
                <div class="decoration-corner corner-top-right"></div>
                <div class="decoration-corner corner-bottom-left"></div>
                <div class="decoration-corner corner-bottom-right"></div>
                
                <div class="chart-container">
                    <div class="chart-item">
                        <div class="chart-label">吞吐量 (件/小时)</div>
                        <div id="chart-throughput" style="width:100%;height:100%;"></div>
                    </div>
                    
                    <div class="chart-item">
                        <div class="chart-label">处理效率 (%)</div>
                        <div id="chart-efficiency" style="width:100%;height:100%;"></div>
                    </div>
                    
                    <div class="chart-item">
                        <div class="chart-label">异常率 (%)</div>
                        <div id="chart-error" style="width:100%;height:100%;"></div>
                    </div>
                </div>
            </div>
            -->
            <!-- 报警面板 -->
            <div class="alert-panel">
                <div class="decoration-corner corner-top-left"></div>
                <div class="decoration-corner corner-top-right"></div>
                <div class="decoration-corner corner-bottom-left"></div>
                <div class="decoration-corner corner-bottom-right"></div>
                
                <div class="alert-title">
                    <span class="alert-title-icon iconify" data-icon="mdi:alert-circle"></span>
                    <h3 class="alert-title-text">超期提醒</h3>
                </div>
                
                <div class="alert-list">
                    <div class="alert-item2 alert-item-new">
                        <span class="alert-icon iconify" data-icon="mdi:alert" id="1"></span>
                        <div class="alert-text">#07 格口&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;已超期&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;24h</div>
                    </div>
                    <div class="alert-item2 alert-item-new">
                        <span class="alert-icon iconify" data-icon="mdi:alert" id="2"></span>
                        <div class="alert-text">#09 格口&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;已超期&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;48h</div>
                    </div>
                    <div class="alert-item2 alert-item-new">
                        <span class="alert-icon iconify" data-icon="mdi:alert" id="3"></span>
                        <div class="alert-text">#13 格口&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;已超期&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;50h</div>
                    </div>
                    <div class="alert-item2">
                        <span class="alert-icon iconify" data-icon="mdi:alert" id="4"></span>
                        <div class="alert-text">#17 格口&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;已超期&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;1h</div>
                    </div>
                    <div class="alert-item2">
                        <span class="alert-icon iconify" data-icon="mdi:alert" id="5"></span>
                        <div class="alert-text">#20 格口&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;已超期&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;2h</div>
                    </div>
                    <div class="alert-item2">
                        <span class="alert-icon iconify" data-icon="mdi:alert" id="6"></span>
                        <div class="alert-text">#22 格口&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;已超期&nbsp;&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp;8h</div>
                    </div>
                </div>
            </div>
        </div>

		<div class="user">
			国防大学联合作战学院
		</div>
    </div>

    <script>
        // 实时时间更新
        function updateTime() {
            const now = new Date();
            const dateString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'short',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('realTime').innerText = dateString;
        }
        
        setInterval(updateTime, 1000);
        updateTime();
        
        // 初始化ECharts图表
        function initECharts() {
            // 吞吐量仪表盘
            const chartThroughput = echarts.init(document.getElementById('chart-throughput'));
            chartThroughput.setOption({
                series: [{
                    type: 'gauge',
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 260,
                    splitNumber: 13,
                    radius: '85%',
                    axisLine: {
                        lineStyle: {
                            width: 12,
                            color: [
                                [0.3, '#00d999'],
                                [0.7, '#40a9ff'],
                                [1, '#ff4d6f']
                            ]
                        }
                    },
                    axisLabel: {
                        distance: -25,
                        color: 'rgba(173, 216, 230, 0.8)',
                        fontSize: 12
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 18,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#00c3ff'
                        }
                    },
                    pointer: {
                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                        length: '12%',
                        width: 16,
                        offsetCenter: [0, '-60%'],
                        itemStyle: {
                            color: '#00c3ff'
                        }
                    },
                    axisTick: {
                        length: 12,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        }
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            color: 'auto',
                            width: 3
                        }
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 28,
                        offsetCenter: [0, '40%'],
                        fontWeight: 'bold',
                        color: '#00f0ff'
                    },
                    data: [{
                        value: 198,
                        name: '件/小时'
                    }]
                }]
            });
            
            // 效率仪表盘
            const chartEfficiency = echarts.init(document.getElementById('chart-efficiency'));
            chartEfficiency.setOption({
                series: [{
                    type: 'gauge',
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 100,
                    radius: '85%',
                    axisLine: {
                        lineStyle: {
                            width: 12,
                            color: [
                                [0.6, '#ff4d6f'],
                                [0.8, '#ffaa45'],
                                [1, '#00d999']
                            ]
                        }
                    },
                    axisLabel: {
                        distance: -25,
                        color: 'rgba(173, 216, 230, 0.8)',
                        fontSize: 12
                    },
                    pointer: {
                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                        length: '12%',
                        width: 16,
                        offsetCenter: [0, '-60%'],
                        itemStyle: {
                            color: '#00c3ff'
                        }
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 18,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#00c3ff'
                        }
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 28,
                        offsetCenter: [0, '40%'],
                        fontWeight: 'bold',
                        color: '#00f0ff'
                    },
                    data: [{
                        value: 92.6,
                        name: '%'
                    }]
                }]
            });
            
            // 异常率仪表盘
            const chartError = echarts.init(document.getElementById('chart-error'));
            chartError.setOption({
                series: [{
                    type: 'gauge',
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 15,
                    radius: '85%',
                    axisLine: {
                        lineStyle: {
                            width: 12,
                            color: [
                                [0.07, '#00d999'],
                                [0.15, '#ffaa45'],
                                [1, '#ff4d6f']
                            ]
                        }
                    },
                    axisLabel: {
                        distance: -25,
                        color: 'rgba(173, 216, 230, 0.8)',
                        fontSize: 12
                    },
                    pointer: {
                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                        length: '12%',
                        width: 16,
                        offsetCenter: [0, '-60%'],
                        itemStyle: {
                            color: '#00c3ff'
                        }
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 18,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#00c3ff'
                        }
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 28,
                        offsetCenter: [0, '40%'],
                        fontWeight: 'bold',
                        color: '#00f0ff'
                    },
                    data: [{
                        value: 1.2,
                        name: '%'
                    }]
                }]
            });
            
            // 适应窗口大小变化
            window.addEventListener('resize', function() {
                chartThroughput.resize();
                chartEfficiency.resize();
                chartError.resize();
            });
        }
        
        // 轮播实时监控画面
        let currentMonitor = 1;
        function rotateMonitor() {
            const monitors = [
                '区域A - 收发柜集群12号机组',
                '区域B - 中央处理系统控制台',
                '区域C - 货物分拣流水线',
                '区域D - 自动封包机'
            ];
            
            currentMonitor = (currentMonitor % 4) + 1;
            const img = document.getElementById('monitorImage');
            if (currentMonitor === 1) {
                img.src = '/mb-potato/image/placeholder.svg';
            } else {
                img.src = '/mb-potato/image/placeholder.svg?t=' + Date.now();
            }
            
            document.querySelector('.monitor-label').innerText = monitors[currentMonitor-1];
            setTimeout(rotateMonitor, 5000);
        }
        
        // 随机生成警告信息
		/*
        function generateAlerts() {
            const alertList = document.querySelector('.alert-list');
            const areas = ['A', 'B', 'C', 'D', 'E'];
            const types = ['温度异常', '电机过热', '网络故障', '传感器异常', '电源波动', '柜门未关', '湿度过高'];
            
            const now = new Date();
            const timeStr = now.getHours().toString().padStart(2, '0') + ':' + 
                           now.getMinutes().toString().padStart(2, '0') + ':' + 
                           now.getSeconds().toString().padStart(2, '0');
            
            const area = areas[Math.floor(Math.random() * areas.length)];
            const type = types[Math.floor(Math.random() * types.length)];
            const deviceId = Math.floor(Math.random() * 20 + 1);
            
            const newAlert = document.createElement('div');
            newAlert.className = 'alert-item alert-item-new';
            newAlert.innerHTML = `
                <span class="alert-icon iconify" data-icon="mdi:alert" id="${Math.floor(Math.random()*100+10)}"></span>
                <div class="alert-text">${timeStr} | 区域${area}第${deviceId}号柜${type}</div>
            `;
            
            alertList.insertBefore(newAlert, alertList.firstChild);
            
            if (alertList.children.length > 6) {
                alertList.removeChild(alertList.lastChild);
            }
            
            setTimeout(generateAlerts, 10000 + Math.random() * 15000);
        }
		*/
        
        // 页面加载完成后初始化
        /*document.addEventListener('DOMContentLoaded', function() {
            initECharts();
            rotateMonitor();
            generateAlerts();
            iconify.scan();
        });*/
    </script>

</body></html>